<!-- 图片 九宫格 -->
<template>
	<view class="imgBox flex-box">
		<!-- 1张 -->
		<image @click="previewimages(index)" class="img1" v-if='imgData.length == 1 && item' v-for="(item,index) in imgData" :key='index'
		 @error="item=''" :src="item?imgUrl+item:staticUrl + '/static/images/imageLoading.png'" mode="aspectFill"></image>
		<!-- 2张/4张 -->
		<image @click="previewimages(index)" class="img2" v-if='imgData.length == 2 || imgData.length==4' v-for="(item,index) in imgData"
		 :key='index' @error="item=''" :src="item?imgUrl+item:staticUrl + '/static/images/imageLoading.png'" mode="aspectFill"></image>
		<!-- 3张/大于4张 -->
		<image @click="previewimages(index)" class="img3" v-if='imgData.length == 3 || imgData.length > 4' :style="{'width': width + 'px','height': width + 'px'}"
		 v-for="(item,index) in imgData" :key='index' @error="item=''" :src="item?imgUrl+item:staticUrl + '/static/images/imageLoading.png'"
		 mode="aspectFill"></image>
	</view>
</template>

<script>
	export default {
		props: ['imgData'],
		data() {
			return {
				staticUrl: this.staticUrl,
				imgUrl: this.imgUrl, 
				width: 90 //3张图时图片的宽高
			}
		},
		created() {
			this.$nextTick(function(){
				if(this.imgData.length == 3 || this.imgData.length > 4){
					uni.createSelectorQuery().select(".imgBox").boundingClientRect((res) => {
						this.width = (res.width - 8)/3
					}).exec()
				}
				
			})
		},
		methods: {
			previewimages: function(i) { // 图片预览
				let imgs = [];
				for (let i in this.imgData) {
					imgs.push(this.imgUrl + this.imgData[i])
				}
				uni.previewImage({
					current: i,
					urls: imgs,
					indicator: "number"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.imgBox {
		width: 100%;
		margin-right: -12rpx;
		margin-bottom: -12rpx;
		flex-wrap: wrap;
	}
	image{border-radius: 6rpx;}
	.img1 {
		width: 100%;
		height: 340rpx;
		margin-bottom: 12rpx;
	}

	.img2 {
		width: 240rpx;
		height: 240rpx;
		margin-right: 4px;
		margin-bottom: 4px;
	}
	.img3 {
		margin-bottom: 4px;
		&:nth-child(3n-1){
			margin: 0 4px;
		}
	}
</style>
